<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #app {
            height: 300px;
            background: rgb(16, 168, 79);
        }

        .left {
            width: 20%;
            float: left;


        }

        .inner1 {
            height: 100px;
            text-align: center;
            line-height: 100px;
            background: rgb(16, 145, 168);
        }

        .inner2 {
            height: 100px;
            text-align: center;
            line-height: 100px;
            background: rgb(16, 168, 79);
        }

        .right {
            width: 80%;
            float: left;

        }
    </style>
</head>

<body>
    <div id="app">
        <div class="left">
            <div :class="flag==0?'inner1':'inner2'" @click="change(0)">循环数组</div>
            <div :class="flag==1?'inner1':'inner2'" @click="change(1)">循环对象</div>
            <div :class="flag==2?'inner1':'inner2'" @click="change(2)">循环数字</div>
        </div>
        <div class="right">
            
                <div  v-if='flag == 0'>
                    <div v-for='data in list'>
                        {{data.name}} --- {{data.id}}
                    </div>
                </div>
                <div  v-if='flag == 1'>
                    <div v-for='(value,key) in obj'>
                        {{value}} --- {{key}}
                    </div>
                </div>
                <div  v-if='flag == 2'>
                    <div v-for='i in 5'>
                        我被循环了5次
                    </div>
                </div> 
        </div>
    </div>

</body>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            flag: 0,
            //数组
            list: [{
                id: 1,
                name: 'vue课件'
            }, {
                id: 2,
                name: 'react课件'
            }, {
                id: 3,
                name: 'js课件'
            }],
            obj: {
                name: "张三",
                age: 20,
                id: 1
            },
        },

        methods: {
            change(flag) {
                this.flag = flag
            },

        }
    })
</script>

</html>